<template>
  <div>
    <div class="product-add-right">
      <svg class="add-img" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M8 12H16" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M12 16V8" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <span class="add-span body-heavy">{{ buttonName }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ButtonRight',
  props: {
    type: {type: Number, default: () => this.GLOBAL.listType.todo},
  },
  data() {
    return {
      buttonName: '',
    };
  },
  mounted() {
    switch (this.type) {
      case this.GLOBAL.listType.todo:
        this.buttonName = '新增待办'
        break
      case this.GLOBAL.listType.profile:
        this.buttonName = '创建员工账号'
        break
    }
  },
  methods: {
  },
};
</script>

<style scoped>
.product-add-right{
  height: 48px;
  background: #fcd538;
  box-shadow: 0 4px 24px rgba(251, 202, 4, 0.32);
  border-radius: 24px;
  display: flex;
  justify-items: center;
  position: fixed;
  align-items: center;
  bottom: 100px;
  right: 16px;
}
.add-img {
  height: 20px;
  width: 20px;
  padding-left: 16px;
}
.add-span {
  height: 20px;
  padding-left: 10px;
  padding-right: 16px;
  text-align: center;
}
</style>